<template>

  <!-- 表单属性 -->
  <el-alert title="请设置对应的表单属性"
            type="success"
            :closable="false"
            style="margin:5px;" />

  <el-collapse accordion
               v-model="activeName">
    <el-collapse-item name="1">
      <template #title>
        基本属性<el-icon class="header-icon">

        </el-icon>
      </template>
      <div class="attritems">

        <el-form ref="form"
                 :model="sizeForm"
                 label-position="right"
                 label-width="80px"
                 size="mini">
          <el-form-item label="表单名">
            <el-input v-model="sizeForm.name"></el-input>
          </el-form-item>
          <el-upload class="upload-demo"
                     drag
                     action="https://jsonplaceholder.typicode.com/posts/"
                     multiple>
            <el-icon class="el-icon-upload">

            </el-icon>
            <div class="el-upload__text">
              拖放或 <em>点击上传</em>
            </div>

          </el-upload>

        </el-form>

      </div>
    </el-collapse-item>
    <el-collapse-item title="内容区"
                      name="2">
      <div class="attritems">

        <el-form ref="formcontent"
                 :model="sizeForm"
                 label-position="right"
                 label-width="80px"
                 size="mini">
          <el-form-item label="自由排版"
                        prop="delivery">
            <el-switch v-model="sizeForm.delivery"></el-switch>
          </el-form-item>

        </el-form>

      </div>

    </el-collapse-item>
    <el-collapse-item title="页头"
                      name="3">
      <div class="attritems">

        <el-form ref="formcontent"
                 :model="sizeForm"
                 label-position="right"
                 label-width="80px"
                 size="mini">
          <el-form-item label="使用页头"
                        prop="delivery">
            <el-switch v-model="sizeForm.delivery"></el-switch>

          </el-form-item>
          <el-form-item label="自由排版"
                        prop="delivery">
            <el-switch v-model="sizeForm.delivery"></el-switch>
          </el-form-item>

          <el-form-item label="高度"
                        prop="delivery">
            <el-input-number v-model="sizeForm.headerheight"
                             :min="0"
                             :max="1000"
                             controls-position="right"
                             @change="handleChange" />
          </el-form-item>

        </el-form>

      </div>
    </el-collapse-item>
    <el-collapse-item title="页脚"
                      name="4">
      <el-form ref="formcontent"
               :model="sizeForm"
               label-position="right"
               label-width="80px"
               size="mini">
        <el-form-item label="使用页脚"
                      prop="delivery">
          <el-switch v-model="sizeForm.delivery"></el-switch>

        </el-form-item>
        <el-form-item label="自由排版"
                      prop="delivery">
          <el-switch v-model="sizeForm.delivery"></el-switch>
        </el-form-item>
        <el-form-item label="高度"
                      prop="delivery">
          <el-input-number v-model="sizeForm.headerheight"
                           :min="0"
                           :max="1000"
                           controls-position="right"
                           @change="handleChange" />
        </el-form-item>

      </el-form>
    </el-collapse-item>
  </el-collapse>

</template>

<script>

export default {

  props: ['data'],

  data () {
    return {
      sizeForm: {headerheight:20,},
      activeName: '1',
      imageUrl: ''
    }
  }
  , methods: {
    handleChange () {

    }
  }

}
</script>

<style>
.attritems {
  padding: 5px;
}
.el-upload-dragger {
  width: 230px !important;
}
</style>